<template>
    <div class="edu-page-warp" style="height:100%">
        <el-card shadow="never" body-style="padding: 24px" style="min-height: 100%;position: relative;">
            <el-tabs v-model="activeName" :before-leave="beforeLeave">
                <el-tab-pane v-for="item in targetTopNavItems" :key="item.value" :label="item.label" :name="item.value">
                    <keep-alive>
                        <base-info
                            v-if="activeName=='baseInfo' && activeName == item.value"
                            :uid="uid"
                            :table-info="item.table"
                            :title="item.label"
                            :ref="item.value"
                            :superLimit="superLimit"
                            :isStudent="isStudent"
                            :status-info="statusInfo"
                        />
                        <common
                            v-if="activeName!='baseInfo' && activeName == item.value"
                            :uid="uid"
                            :title="item.label"
                            :table-info="item.table"
                            :tab-value="item.value"
                            :is-delete="item.isDelete"
                            :is-multi="item.isMulti"
                            :ref="item.value"
                            :isStudent="isStudent"
                            :superLimit="superLimit"
                        />
                    </keep-alive>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script>
import { getVisibleTabList, getStatusInfoByStudentId } from "common/src/api/studentinfo";
import baseInfo from "./details/baseInfoNew";
import common from "./details/commonNew";

export default {
    name: "student-base-info",
    components: {
        baseInfo,
        common
    },
    props: {
        sid: {
            type: String,
            required: false
        }
    },
    data() {
        return {
            currentIndex: 0,
            activeName: "baseInfo",
            adminToTurn: true,
            uid: "",
            // 编辑权限，默认不可编辑
            superLimit: null,
            // 学生
            isStudent: false,
            statusInfo: null, //学籍基本信息
            targetTopNavItems: [],
            topNavItems: [
                {
                    label: this.$t("student.baseInfo"),
                    value: "baseInfo",
                    table: [
                        {
                            title: this.$t("student.studentInfo"),
                            tableName: "student_basic_information_t"
                        },
                        {
                            title: this.$t("student.contactAndFamilyInfo"),
                            tableName: "student_contact_information_t"
                        }
                    ],
                    isDelete: false,
                    isMulti: false
                },
                {
                    label: this.$t("student.status"),
                    value: "statusInfo",
                    table: [
                        {
                            title: this.$t("student.status"),
                            tableName: "student_status_information_t"
                        },
                        {
                            title: this.$t("student.inSchoolInfo"),
                            tableName: "student_admission_information_t"
                        }
                    ],
                    isDelete: false,
                    isMulti: false
                },
                {
                    label: this.$t("student.educationalBackground"),
                    value: "educationInfo",
                    table: [
                        {
                            title: this.$t("student.educationalBackground"),
                            tableName: "student_educational_backgroud_t"
                        }
                    ],
                    isDelete: true,
                    isMulti: true
                },
                {
                    label: this.$t("student.workExperience"),
                    value: "workInfo",
                    table: [
                        {
                            title: this.$t("student.workExperience"),
                            tableName: "student_work_experience_t"
                        }
                    ],
                    isDelete: true,
                    isMulti: true
                },
                {
                    label: this.$t("student.jointTraining"),
                    value: "trainInfo",
                    table: [
                        {
                            title: this.$t("student.jointTraining"),
                            tableName: "student_joint_training_t"
                        }
                    ],
                    isMulti: true,
                    isDelete: true
                },
                {
                    label: this.$t("student.certificateInfo"),
                    value: "certificateInfo",
                    table: [
                        {
                            title: this.$t("student.certificateInfo"),
                            tableName: "student_paperwork_t"
                        }
                    ],
                    isDelete: true,
                    isMulti: true
                },
                {
                    label: this.$t("student.contacts"),
                    value: "contactsInfo",
                    table: [
                        {
                            title: this.$t("student.contacts"),
                            tableName: "student_family_members_t"
                        }
                    ],
                    isDelete: true,
                    isMulti: true
                },
                {
                    label: this.$t("student.dormitory"),
                    value: "dormitoryInfo",
                    table: [
                        {
                            title: this.$t("student.dormitory"),
                            tableName: "student_dormitory_t"
                        }
                    ],
                    isDelete: false,
                    isMulti: false
                },
                {
                    label: this.$t("student.other"),
                    value: "otherInfo",
                    table: [
                        {
                            title: this.$t("student.other"),
                            tableName: "student_passport_t"
                        },
                        {
                            title: '',
                            tableName: "student_other_infomation_t"
                        }
                    ],
                    isDelete: false,
                    isMulti: false
                }
            ]
        };
    },
    created() {
        let session = localStorage.getItem("sessiondata");
        session = JSON.parse(session);
        let user = session.mockUser || session.user;
        if (this.sid) {
            this.uid = this.sid;
        } else if (this.$route.params.id) {
            this.uid = this.$route.params.id;
        } else {
            this.uid = user.uid;
        }
        getVisibleTabList(this.uid).then(res => {
            if (res.code == 200) {
                // 当前用户内置角色包含学生
                if (user.innerRoles.includes("6")) {
                    this.isStudent = true
                } 
                this.superLimit = res.data.editControlContained
                this.topNavItems.forEach((item, index) => {
                    //TODO:临时解决方法，最好直接调用接口，返回可见分类标签信息
                    if (res.data.visibleTabList.includes(item.label)) {
                        this.targetTopNavItems.push(item)
                    }
                });
            }
        });
        getStatusInfoByStudentId(this.uid).then(res => {
            if (res.code == 200 && res.data && res.data.length) {
                this.statusInfo = res.data[0];
            }
        });
    },
    methods: {
        async beforeLeave(activeName, oldActiveName) {
            let _this = this;
            _this.adminToTurn = false
            let obj = this.$refs[oldActiveName];
            let module = Array.isArray(obj) ? obj[0] : obj;
            if (module.checkIsDiff) {
                let modifyStatus = module.checkIsDiff();
                if (modifyStatus) {
                    await this.$confirm('您的当前操作尚未保存，是否确认切换页签？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.adminToTurn = true
                    }).catch(() => {
                        _this.adminToTurn = false
                    }).finally(() => {
                    })
                } else {
                   _this.adminToTurn = true 
                }
            }
            return new Promise((resolve, reject) => {
                if (_this.adminToTurn) {
                    resolve()
                } else {
                    reject()
                }
                _this.adminToTurn = false
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.edu-page-title {
    position: relative;
    margin-top: 10px;
    margin-bottom: 0px;
    .edu-page-sub-title {
        padding: 0;
        width: 90px;
        text-align: center;
        box-sizing: border-box;
        display: inline-block;
        list-style: none;
        font-weight: 500;
    }
    .edu-page-sub-title.active {
        color:#409eff;
    }
    .edu-page-sub-title.active:after {
        content: '';
        width: auto;
        height: 2px;
        background: #409eff;
        border-radius: 1px;
        display: block;
        margin-top: 20px;
        z-index: 20;
    } 
    .edu-page-sub-title:hover {
        color: #409eff;
        cursor: pointer;
    }
    .edu-page-sub-line {
        display: inline-block;
        position: relative;
        top: 2px;
        left: -2px;
        height: 15px;
        border-left: 1px solid;
        color: #e5e5e5;
    }
    .edu-page-sub-line:last-child {
        border: none;
    }
    .self-border-right {
        border-right: 1px solid #e5e5e5;
    }
}
.edu-page-title-line {
    position: absolute;
    top: 75px;
    width: 100%;
    border: 1px solid #e4e7ed;
}
</style>
